<template>
  <div>
<van-tabs type="card">
  <van-tab title="未读消息">
    <div class="container" :key="index" v-show="item.state == 0" v-for="(item,index) in lists">
      <p class="userber">{{item.title}} <van-button type="info" size="small" class="weidu" @click="dudu(item)">标为已读</van-button> </p>
    </div>
    <van-button type="primary" @click="cao">全部</van-button>
  </van-tab>
  <van-tab title="已读消息"
>
    <div class="container"  :key="index" v-show="item.state == 1" v-for="(item,index) in lists">
       <p class="userber">{{item.title}} <span><van-button type="info" size="small" class="weidu" @click="xi(item)">标为未读</van-button> <van-button type="danger" size="small" class="weidu" @click="del(item)">删除</van-button></span></p>
    </div>
<van-button type="primary" @click="ni">全部</van-button>
  </van-tab>
  <van-tab title="回收站" 
>
    <div class="container"  :key="index" v-show="item.state == 2" v-for="(item,index) in lists">
       <p class="userber">{{item.title}} <van-button type="info" size="small" class="weidu" @click="yi(item)">还原</van-button> </p>
    </div>
    <van-button type="primary" @click="ma">全部</van-button>
  </van-tab>
</van-tabs>
  </div>
</template>

<script>
export default {
    data(){
      return{
        lists:JSON.parse(localStorage.getItem(this.lists)) || []
      }
    },
    mounted(){
      this.$axios.get("todo.json").then((res)=>{
        this.lists = res.data.data
      })
      this.message()
    },
    methods:{
      message(){
        localStorage.setItem("lists",JSON.stringify(this.lists));
      },
      xi(item){
        item.state = 0,
        this.message()
      },
      dudu(item){
        item.state = 1,
        this.message()
      },  
      yi(item){
        item.state = 1,
        this.message()
      },
      del(item){
        item.state = 2,
        this.message()
      },
      cao(){
        this.lists.forEach(item => {
          if(item.state == 0){
            item.state = 1
          }
           this.message()
        });
      },
      ni(){
        this.lists.forEach(item => {
          if(item.state == 1){
            item.state = 2
          } this.message()
        });
      },
      ma(){
        this.lists.forEach(item => {
          if(item.state == 2){
            item.state = 0
          } this.message()
        });
      }
    }
}
</script>

<style>
.container{
  width: 98%;
  display: inline-flex;
  justify-content: center;
}
.card{
  /* width: 95%; */
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.userber{
  width: 100%;
  color: black;
  background-color: bisque;
  /* text-align: start; */
  display: flex;
  justify-content: space-between;
}

.van-button--small{
  margin-left: 220px;
}
</style>